<template>
      <div>
        <el-radio-group v-model="type" @change="showChart">
            <el-radio-button label="商品销售统计图"></el-radio-button>
            <el-radio-button label="服务统计图"></el-radio-button>
        </el-radio-group>
        <div class="total" id="myChart" ref="myChart"></div>
      </div>
    
</template>
<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar"
import "echarts/extension/bmap/bmap";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

// import axios from "axios";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

// import BMap from 'BMap'
export default {
    data() {
        return {
            type: "服务统计图",
            months: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            commodityData: [300,600,700,900,800,900,900,700,500,900,1100,1200],
            serveData: [600,400,700,900,300,500,400,700,500,900,600,800],
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.showChart();
        });
    },

    methods: {
         showChart() {
            // 销毁之前的实例
            echarts.dispose(this.$refs.myChart);
            // 重新创建新的实例
            let myChart = echarts.init(this.$refs.myChart);
            
            if (this.type == "服务统计图") {         
                let data =this.serveData;
                myChart.setOption(this.serveOptions, true);
            }else if(this.type == "商品销售统计图"){
                 let data =this.commodityData;
                  myChart.setOption(this.commodityOptions, true);
            }
            
        },
    },
    computed: {
        commodityOptions() {
            return {
                title: {
                    text: "商品销售额统计图"
                },
                tooltip: {},
                xAxis: {
                    data: this.months
                },
                yAxis: {},
                series: [
                    {
                        name: "销售额",
                        type: "bar",
                        data: this.commodityData
                    }
                ]
            };
        },
        serveOptions() {
            return {
                title: {
                    text: "服务统计图"
                },
                tooltip: {},
                xAxis: {
                    data: this.months
                },
                yAxis: {},
                series: [
                    {
                        name: "服务",
                        type: "bar",
                        data: this.serveData
                    }
                ]
            };
        },
        
    }
};
</script>
<style scoped>
.total {
    width: 100%;
    height: 500px;
}
</style>

